<template>
  <SysDialog draggable :title="dialog.title" :visible="dialog.visible" :width="dialog.width"
    :showFooter="dialog.showFooter" :height="dialog.height" @onClose="onClose" @onConfirm="confirm">
    <template v-slot:content>
      <!-- 内容组件 -->
      <div class="add-class">
        <el-button size="default" type="success" :icon="Plus" @click.stop="addBtns">新增</el-button>
      </div>
      <el-table :height="400" v-loading="checkListData.Loading" :data="checkListData.list" style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column prop="name" label="模板名称" />
        <el-table-column prop="deptPhone" label="创建时间" />
        <el-table-column label="操作" width="400" align="center">
          <template #default="scope">
            <el-button size="default" type="primary" :icon="Edit" @click="addBtns((scope.row))">编辑</el-button>
            <el-button size="default" type="danger" :icon="Close" @click="deleteBtn((scope.row.id))">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

  </SysDialog>
</template>

<script setup lang='ts'>
import { Search, Plus, Edit, Close } from '@element-plus/icons'
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import useInstance from '@/hooks/useInstance';
import useCheckList from '@/composables/01work/02TemPlate/useCheckList'
// 使用
const { dialog, onClose, onShow } = useDialog()
const { global, proxy } = useInstance();
// const { addBtns } = useCheckList()
// 保存
const props = defineProps({
  checkListData: {
    type: Object,
    default: () => { }
  }
})
const emit = defineEmits(['checkAdd', 'deleteBtn'])
const addBtns = (row) => {
  emit('checkAdd', row)
}
const deleteBtn = (row) => {
  emit('deleteBtn', row)
}
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 1) {
    return "warning-row";
  } else {
    return "success-row";
  }
}
const confirm = () => { }
const show = (row?: any) => {
  console.log(row, 'show');
  dialog.width = 950
  dialog.height = 450
  dialog.showFooter = false
  dialog.title = '检查单管理'

  onShow()
  // global.$resetForm(addTemForm.value,dialogModel)
  // if(type === EditType.EDIT){
  //   global.$objCopy(row,dialogModel)
  // }
}
defineExpose({
  show
})
</script>
<style scoped lang='scss'>
.add-class {
  display: flex;
  justify-content: flex-end;
}
</style>